<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-item label="会议名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['meetingName', validatorRules.meetingName]" placeholder="请输入会议名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="会议主题" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['meetingSubject', validatorRules.meetingSubject]" placeholder="请输入会议主题"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" style="display: none">
            <a-form-item label="项目id" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['projectId', validatorRules.projectId]" placeholder="请输入项目id"></a-input>
            </a-form-item>
          </a-col>
          <!--          <a-col :span="12">-->
          <!--            <a-form-item label="项目简称" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
          <!--              <a-input-->
          <!--                v-decorator="['projectShortName', validatorRules.projectShortName]"-->
          <!--                placeholder="请选择项目简称"-->
          <!--                @click="projectShortNameClick()"-->
          <!--              ></a-input>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :span="12">
            <a-form-item label="会议时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择会议时间" v-decorator="['meetingTime']" :trigger-change="true" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="会议地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['meetingPlace']" :trigger-change="true"
                                 dictCode="project_meeting_address" placeholder="请选择会议地点"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="会议类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['meetingType', validatorRules.meetingType]"
                                 :trigger-change="true"
                                 dictCode="project_meeting_types" placeholder="请选择会议类型"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="主持人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-decorator="['compere', validatorRules.compere]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="记录人" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-select-user-by-dep v-decorator="['recorder']"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="与会人员" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['attendee']" rows="1" placeholder="请输入与会人员"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="缺席人员" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['absentee']" rows="1" placeholder="请输入缺席人员"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="会议记录" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
              <a-textarea v-decorator="['meetingRecords']"  :autoSize='{minRows:4}' placeholder="请输入会议记录"/>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item label='附件' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <j-upload v-decorator="['accessories']" :trigger-change='true'></j-upload>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否结束会议" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-switch v-decorator="['endMeeting']"></j-switch>
            </a-form-item>
          </a-col>

<!--          <a-col :span="24">-->
<!--            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2">-->
<!--              <a-textarea v-decorator="['remarks']" rows="1" placeholder="请输入备注"/>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
        </a-row>
      </a-form>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="待办事项" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="hfPmProjectMeetingTodosTable.loading"
          :columns="hfPmProjectMeetingTodosTable.columns"
          :dataSource="hfPmProjectMeetingTodosTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>
    <a-row v-if="showFlowSubmitButton" style="text-align: center;width: 100%;margin-top: 16px;">
      <a-button @click="handleOk">提 交</a-button>
    </a-row>

    <hf-pm-project-modal ref="hfPmProjectModal" :multiple="false" @pm-project-select="pmProjectSelect"/>
  </a-spin>
</template>

<script>

  import pick from 'lodash.pick'
  import { getAction } from '@/api/manage'
  import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import HfPmProjectModal from './HfPmProjectModal'

  export default {
    name: 'HfPmProjectMeetingRecordsForm',
    mixins: [JEditableTableMixin],
    components: {
      HfPmProjectModal
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 0,
        validatorRules: {
          meetingName: {
            rules: [
              { required: true, message: '请输入会议名称!' }
            ]
          },
          meetingSubject: {
            rules: [
              { required: true, message: '请输入会议主题!' }
            ]
          },
          meetingType: {
            rules: [
              { required: true, message: '请选择项目类型!' }
            ]
          },
          compere: {
            rules: [
              { required: false, message: '请输入主持人!' }
            ]
          },
          projectShortName: {
            rules: [
              { required: true, message: '请输入选择项目简称!' }
            ]
          }
        },
        refKeys: ['hfPmProjectMeetingTodos'],
        tableKeys: ['hfPmProjectMeetingTodos'],
        activeKey: 'hfPmProjectMeetingTodos',
        // 待办事项
        hfPmProjectMeetingTodosTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '待办内容',
              key: 'todoDes',
              type: FormTypes.input_pop,
              width: '700px',
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            {
              title: '责任人',
              key: 'dealPersion',
              type: FormTypes.input_pop,
              width: '200px',
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            {
              title: '预计完成时间',
              key: 'playDealTime',
              type: FormTypes.date,
              width: '200px',
              placeholder: '请输入${title}',
              defaultValue: '',
              validateRules: [{ required: true, message: '${title}不能为空' }]
            },
            // {
            //   title: '备注',
            //   key: 'remarks',
            //   type: FormTypes.input_pop,
            //   width: '200px',
            //   placeholder: '请输入${title}',
            //   defaultValue: ''
            // },
            // {
            //   title: '创建人',
            //   key: 'createBy',
            //   type: FormTypes.input,
            //   width: '120px',
            //   placeholder: this.$ls.get('Login_Userinfo').username,
            //   disabled: true,
            //   defaultValue: this.$ls.get('Login_Userinfo').username
            // },
            // {
            //   title: '创建时间',
            //   key: 'createTime',
            //   type: FormTypes.input,
            //   width: '120px',
            //   placeholder: new Date().toLocaleDateString().replaceAll('/', '-'),
            //   disabled: true,
            //   defaultValue: new Date().toLocaleDateString().replaceAll('/', '-')
            // }
          ]
        },
        url: {
          add: '/meeting/hfPmProjectMeetingRecords/add',
          edit: '/meeting/hfPmProjectMeetingRecords/edit',
          queryById: '/meeting/hfPmProjectMeetingRecords/queryById',
          hfPmProjectMeetingTodos: {
            list: '/meeting/hfPmProjectMeetingRecords/queryHfPmProjectMeetingTodosByMainId'
          },
          fields:[

          ]
        }
      }
    },
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: () => {
        },
        required: false
      },
      //表单模式：false流程表单 true普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    created() {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData()
    },
    methods: {
      addBefore() {
        this.form.resetFields()
        this.hfPmProjectMeetingTodosTable.dataSource = []
      },
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model, 'remarks', 'meetingType', 'projectId', 'meetingName', 'meetingSubject', 'meetingPlace', 'meetingTime', 'compere', 'recorder', 'attendee', 'absentee', 'meetingRecords', 'projectShortName','accessories','endMeeting')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.hfPmProjectMeetingTodos.list, params, this.hfPmProjectMeetingTodosTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          hfPmProjectMeetingTodosList: allValues.tablesValue[0].values
        }
      },
      //渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = { id: this.formData.dataId }
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result)
            }
          })
        }
      },
      validateError(msg) {
        this.$message.error(msg)
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'remarks', 'projectId', 'meetingType', 'meetingName', 'meetingSubject', 'meetingPlace', 'meetingTime', 'compere', 'recorder', 'attendee', 'absentee', 'meetingRecords', 'projectShortName','accessories','endMeeting'))
      },
      projectShortNameClick() {
        this.$nextTick(() => {
          this.$refs.hfPmProjectModal.title = '选择项目'
          this.$refs.hfPmProjectModal.visible = true
        })
      },
      pmProjectSelect(data) {
        this.form.setFieldsValue({
          projectId: data.id,
          projectShortName: data.shortName
        })
      }
    }
  }
</script>

<style scoped>
</style>